<template>
	<view class="body">
		<view class="head">
			<view class="head_left" @tap="back()">
				<image src="/static/wode/return.png" mode=""></image>
			</view>
			<view class="head_mid">
				{{typeTitle}}
			</view>
			<view class="head_right">
				<image src="/static/jingyu/shaixuan.png" @tap="tofilter"></image>
			</view>
		</view>
		<view class="countryBox" id="" v-if="matchingType==''">
			<view class="leftBox">
				<view style="width: 2000upx;">
					<view @tap="selectMenu(index,item,'country')" v-for="(item,index) in countryList" :class="menuIndex==index ? 'active coutryKuang' : 'coutryKuang'"
					 :key="index">{{item}}</view>
				</view>
			</view>
			<view class="moreBox" @tap="moreCountry">
				<view class="moreWen">更多</view>
				<view class="tianzhuan">
					<image src="/static/right.png" />
				</view>
			</view>
		</view>
		<view class="countryBox" id="" v-show="searchLanguage==true">
			<view class="leftBox2">
				<view style="width: 1975px;">
					<view @tap="selectMenu(index,item,'language')" v-for="(item,index) in languageList" :class="menuIndex==index ? 'active coutryKuang' : 'coutryKuang'"
					 :key="index">{{item}}</view>
				</view>
			</view>
			<view class="moreBox2">
				<!-- <view class="moreWen">更多</view> -->
				<view class="tianzhuan">
					<image src="/static/right.png" />
				</view>
			</view>
		</view>
		<view class="common-body" v-if="matchingType==='master'" :class="searchLanguage==true||matchingType==''?'margin2':''">
			<view class="conent_body" v-for="(item,index) in userList" :key="index" @tap="toMasterDetile(item.user_id,item.master_type)">
				<view class="">
					<view class="left_body">
						<image mode="aspectFill" :src="item.avatar"></image>
						<image class="countryimg" v-show="item.national_flag" :src="item.national_flag" mode=""></image>
						<!-- 					<view class="bottom_box textOverflow">
						<span v-text="item.address_str"></span>
					</view>
					<view class="top_box" v-text="item.user_identity"></view> -->
					</view>

					<view class="right_body">
						<view class="title_box">
							<view class="nickname-and">
								<text class="nickname textOverflow" v-text="item.nick_name"></text>
							</view>
							<view class="img-sex">
								<image class="image_box" v-if="item.sex==2" src="/static/woman.png"></image>
								<image class="image_box" v-else src="/static/man.png"></image>
							</view>
							<view class="authentication_box shenfen">{{item.type}}</view>
						</view>


						<view class="common_ys textOverflow">
							掌握语言:
							<text>{{item.languages}}</text>

						</view>
						<view class="common_ys textOverflow">
							累计上课{{item.map.classCount}}节 累计学生{{item.map.studentCount}}人
						</view>
					</view>
				</view>

				<view class="address-and">
					<view class="teachLanguage">
						英语
					</view>
					<text src="/static/jingyou/liaoliao.png" mode="">{{item.map.masterprice}}元/月</text>
				</view>
			</view>
		</view>
		<view class="common-body" v-else :class="matchingType=='' ? 'margin2' : ''">
			<view @tap="toUserDetail(item.user_id)" v-for="(item,index) in userList" :key="index" class="conent_body content-box">
				<!-- <view class="">

				</view> -->
				<view class="left_body">
					<image mode="aspectFill" :src="item.avatar"></image>
					<image class="countryimg" v-show="item.national_flag" :src="item.national_flag" mode=""></image>
				</view>

				<view class="right_body">
					<view class="title_box">
						<view class="nickname-and">
							<text class="nickname textOverflow" v-text="item.nick_name"></text>
						</view>
						<view class="img-sex">
							<image class="image_box" v-if="item.sex==2" src="/static/woman.png"></image>
							<image class="image_box" v-else src="/static/man.png"></image>
						</view>
						<view class="authentication_box" v-if="item.identify!=''">
							已认证
						</view>
						<view class="authentication_box2" v-else>
							未认证
						</view>
						<view class="authentication_box shenfen" v-if="item.overseas_auth" v-text="item.overseas_identity_name"></view>
						<view class="authentication_box2 shenfen" v-else>
							境外身份
						</view>
					</view>


					<view class="common_ys textOverflow">
						国籍:
						<text v-if="item.hometown!=''" v-text="item.hometown"></text>
						<text v-else>未知</text>
						掌握语言:
						<text v-if="item.languages!=''">{{item.languages}}</text>
						<text v-else>未知</text>
					</view>
					<view class="common_ys textOverflow">
						偏好:
						<text v-if="item.preference!=''" v-text="item.preference"></text>
						<text v-else>未知</text>
						<view class="guanxi" v-show="item.relation_chain" v-text="item.relation_chain"></view>
						<!-- <view class="" v-show="item.distance!=null&&typeTitle=='附近的人'">{{item.distance}}km</view> -->
					</view>
				</view>
				<view class="address-and">
					<view class="last_time" v-if="item.log_out_time" v-text="item.log_out_time"></view>
					<view class="last_time" v-else>未知</view>
					<image src="/static/jingyou/liaoliao.png" mode=""></image>
				</view>
			</view>
		</view>
		<filter :isShowFilter="isShowFilter" @confirm="confirm"></filter>
		<mask :isShowMask="isShowMask" @closeMask="closeMask"></mask>
	</view>

</template>

<script>
	import mask from '../../../components/mask'
	import filter from '../../../components/filter'

	export default {
		components: {
			mask,
			filter
		},
		data() {
			return {
				typeTitle: '', //不包含个数的标题
				title: '',
				preference: null,
				language: null,
				latitude: 0,
				longitude: 0,
				sex: 0,
				memeber_level: null,
				city: null,
				country: null,
				matchingType: null,
				order_by: null,
				commend: null,
				user_id: uni.getStorageSync('user_id'),
				showLanguage: false,
				showMatch: true,
				showCountry: false,
				isShowFilter: false, //显示筛选
				isShowMask: false,



				sexActiveIndex: 0,
				languageActiveIndex: 0,
				matchActiveIndex: 0,
				sortActiveIndex: 0,
				vipActiveIndex: -1,
				minVal: 18,
				maxVal: 50,
				age_start: null,
				age_end: null,
				showMinVal: 18,
				showMaxVal: 50,
				fontColor: true,
				confirmBtnShow: false,
				menuIndex: 0,
				countryName: '', //登录用户所在国家
				myCountry: '', //我的国家
				selectCountry: '', //选择国家
				items: [{
						image: "../../../static/tu_02.png",
						activeImage: "../../../static/tu_03.png",
						text: "筛选"
					},
					{
						image: "../../../static/tu_02.png",
						activeImage: "../../../static/tu_03.png",
						text: "智能匹配"
					},
					{
						image: "../../../static/tu_02.png",
						activeImage: "../../../static/tu_03.png",
						text: "会员"
					}
				],

				sexList: ['不限', '男', '女'],
				languageList: ['全部', '汉语', '英语', '德语', '法语', '韩语', '俄语', '日语', '丹麦语', '泰语', '印度语', '越南语','西班牙语','阿拉伯语','葡萄牙语','意大利语','希腊语','荷兰语','波兰语','爱沙尼亚语','芬兰语','捷克语','罗马尼亚语','斯洛文尼亚语','瑞典语','匈牙利语'],
				matchList: ['全部', '通讯录好友', '同学', '同事', '附近', '老乡'],
				sortList: ['默认', '推荐', '最热', '最新'],
				vipList: ['普通会员', '畅聊会员', '全部会员'],
				countryList: ['全球', '本国', '美国', '英国', '法国', '意大利', '日本', '韩国', '澳大利亚', '葡萄牙', '西班牙'],

				userList: [],
				currentPage: 1,
				addressInfo: null,
				filter: null,
				backgroundColor: '#A5E1DD',
				datas: null, //数据
				mapParam: {}, //筛选数据
				isConfirm: false, //是否筛选
				searchLanguage: false, //是否筛选助学师语言
				masterType: '', //助学师类型
				masterLanguage: '', //助学师语言
			}
		},
		onPullDownRefresh() {
			if (!this.isShowFilter) {
				this.currentPage = 1;
				this.userList = [];
				this.requestData();
				setTimeout(function() {
					uni.stopPullDownRefresh();
				}, 1000);
			}
		},
		onReachBottom() {
			if (!this.isShowFilter) {
				this.currentPage++;
				this.requestData();
			}
			
			// uni.pageScrollTo({
			// 	scrollTop: 0,
			// 	duration: 0
			// });

		},
		onLoad: function(option) {
			console.log(option, 'option');
			if (option.search_type !== undefined) { //导航入口
				this.matchingType = option.search_type;
				this.typeTitle = option.chinese;
				this.showMatch = false;
				if (this.matchingType == 'master') {
					if (option.language_type != undefined) {
						this.searchLanguage = true
					}
					if (option.condition != undefined) {
						this.typeTitle = option.condition
						if (this.typeTitle == '专业助学师') {
							this.masterType = 'major'
						} else if (this.typeTitle == '跨境助学师') {
							this.masterType = 'cross_border'
						} else if (this.typeTitle == '母语助学师') {
							this.masterType = 'mother_tongue'
						} else if (this.typeTitle == '私教') {
							this.masterType = 'private_education'
						}
					}
				}
			}

			if (option.filter !== undefined) { //本国境友等入口
				this.filter = option.filter;

				var filter = option.filter;
				this.typeTitle = option.chineseFilter;

				if (filter === 'hot') {
					this.datas = {
						advertising_position: true,
					}
				}
				if (filter === 'like') {
					this.datas = {
						preference: '交友拍拖',
					};
				}
				if (filter === 'discover') {
					this.matchingType = "new";
				}
			}
			if (option.country != undefined) {
				this.country = option.country
			}
		},
		onShow() {
			console.log(this.matchingType, '类别', 111111111111111111111111111)
		},
		mounted: function() {
			this.addressInfo = JSON.parse(uni.getStorageSync('addressInfo'));
			this.countryName = uni.getStorageSync('countryName');
			console.log(this.countryName)
			this.city = this.addressInfo.regeocodeData.addressComponent.city;
			this.latitude = this.addressInfo.latitude;
			this.longitude = this.addressInfo.longitude;
			if (this.filter === 'nativeCountry') {
				this.country = this.addressInfo.regeocodeData.addressComponent.country;
			}

			// this.requestData();
		},
		onShow: function() {
			console.log(this.searchLanguage)
			var me = this;
			me.userList = []; //清空
			if(uni.getStorageSync("userCountry")!=''||uni.getStorageSync("userCountry")!=undefined){
				me.selectCountry = uni.getStorageSync("userCountry");
				if(me.countryList.indexOf(me.selectCountry)==-1){
					me.countryList.splice(2,0,me.selectCountry)
				}
			}
			
			me.myCountry = uni.getStorageSync('nowCountry');
			console.log(me.selectCountry)
			for (var i = 0; i < me.countryList.length; i++) {
				if (me.selectCountry == me.countryList[i]) {
					this.menuIndex = i
				}
			}
			me.countryList = me.countryList.filter(function (s) {
			   return s && s.trim();
			});

			this.requestData();
			console.log(this.countryList)
		},
		methods: {
			toUserDetail(id) {
				var me = this;
				console.log(id)
				this.myToLogin(function() {
					me.myToUserDetail(id);
				})
			},
			tofilter() { //筛选
				this.isShowFilter = true;
				this.isShowMask = true;
			},
			closeMask() { //关闭遮罩层
				this.isShowMask = false;
				if (this.isShowFilter) {
					this.isShowFilter = false;
				}
			},
			selectMenu(index, item, type) { //根据国家搜索用户
				this.menuIndex = index;
				this.currentPage = 1;
				this.userList = [];
				if (type == 'country') {
					if (item == '全球') {
						item = "";
					} else if (item == '本国') {
						item = this.myCountry
					}
					this.selectCountry = item
				} else if (type == 'language') {
					if (item == '全部') {
						item = ""
					}
					this.masterLanguage = item
				}

				this.requestData();
			},
			requestData() {
				var me = this;
				if (this.datas != null) {
					var data = this.datas;
					data.searchParam = {
						longitude: this.addressInfo.latitude,
						latitude: this.addressInfo.longitude,
					};
					data.currentPage = this.currentPage;
					if (this.isConfirm==true) {
						data.age_end = this.mapParam.age_end;
						data.age_start = this.mapParam.age_start;
						data.sex = this.mapParam.sex;
						// data.country = this.mapParam.country;
						data.preference = this.mapParam.preference;
					}
				} else {
					var data = {
						searchParam: {
							longitude: this.addressInfo.latitude,
							latitude: this.addressInfo.longitude,
							search_type: this.matchingType
						},
						country: this.selectCountry,
						currentPage: this.currentPage,
					}
					if (this.matchingType == 'master') {
						data.master_type = this.masterType
						data.languages = this.masterLanguage
						data.is_help = true
					} else if (this.matchingType == '') {
						data.is_high_quality = true
					}
					if (this.isConfirm==true) {
						data.age_end = this.mapParam.age_end;
						data.age_start = this.mapParam.age_start;
						data.sex = this.mapParam.sex;
						// data.country = this.mapParam.country;
						data.preference = this.mapParam.preference;
					}
				}

				// 				if (this.selectCountry == '全球') { //全球
				// 					var matchingType = 'all'
				// 				} else if (this.selectCountry == '本国') { //本国
				// 					var country = this.countryName
				// 				} else {
				// 					var country = this.selectCountry
				// 				}
				// 				var data = [{
				// 					language: this.language,
				// 					preference: this.preference,
				// 					latitude: this.latitude,
				// 					longitude: this.longitude,
				// 					sex: this.sex,
				// 					memeber_level: this.memeber_level,
				// 					addressParam: {
				// 						country: country,
				// 						city: this.city,
				// 					},
				// 					searchParam: {
				// 						longitude: this.addressInfo.latitude,
				// 						latitude: this.addressInfo.longitude,
				// 						search_type: this.matchingType，
				// 					},
				// 					commend: this.commend,
				// 					user_id: this.user_id
				// 				}, this.page]

				console.log(data);

				me.myAjaxNewPost({
					model: 'user',
					controllerName: 'userInfo',
					actionName: 'queryUserListPage',
					data: data,
					successBack: function(res) {
						// console.log(res);
						if (res.data.data != null && res.data.data.length != 0) {
							for (var i = 0; i < res.data.data.length; i++) {
								res.data.data[i].distance = parseInt((res.data.data[i].distance) / 1000)
								res.data.data[i].log_out_time = me.myDate.getDateDiff(res.data.data[i].log_out_time)
								// me.userList.push(res.data.data[i])
							}
							if (me.matchingType == 'master') {
								for (var a = 0; a < res.data.data.length; a++) {
									res.data.data[a].languages = []
								}
								for (var j = 0; j < res.data.data.length; j++) {
									if (res.data.data[j].master_type == 'major') {
										res.data.data[j].type = '专业助学师'
									} else if (res.data.data[j].master_type == 'cross_border') {
										res.data.data[j].type = '跨境助学师'
									} else if (res.data.data[j].master_type == 'mother_tongue') {
										res.data.data[j].type = '母语助学师'
									} else if (res.data.data[j].master_type == 'private_education') {
										res.data.data[j].type = '私教'
									}
									res.data.data[j].languages.push(res.data.data[j].map.masterinfo.mother_tongue, res.data.data[j].map.masterinfo
										.teach_language, res.data.data[j].map.masterinfo.language);
									// res.data.data[j].languages=me.flatten(res.data.data[j].languages);
									res.data.data[j].languages = res.data.data[j].languages.toString().split(',')
									// console.log(res.data.data[j].languages,'语言')
									res.data.data[j].languages = me.removalArr(res.data.data[j].languages);
									res.data.data[j].languages = res.data.data[j].languages.join('/')
								}
							}
							if (me.isConfirm == true) {
								me.userList = res.data.data;
								console.log('筛选数据')
							} else {
								for (var b = 0; b < res.data.data.length; b++) {
									me.userList.push(res.data.data[b]);
								}
							}

							console.log(me.userList, '用户列表')
							// me.userList.push(res.data.data) 
						} else {
							// me.userList = []
							uni.showToast({
								title: '没有更多数据了',
								icon: 'none'
							})
						}
					},
					completeBack: function() {
						uni.stopPullDownRefresh();
					}
				})
			},
			flatten(arr) { //数组扁平化
				while (arr.some(item => Array.isArray(item))) {
					arr = [].concat(...arr);
				}
				return arr;
			},
			removalArr(arr) { //去重
				var arrs = [];
				for (var b = 0; b < arr.length; b++) {
					if (arr[b] != "") {
						if (arrs.indexOf(arr[b]) == -1) {
							arrs.push(arr[b])
						};
					}

				}
				return arrs;
			},

			moreCountry() { //选择更多国家
				uni.navigateTo({
					url: '/pages/Other/countrySelect/countrySelect'
				})
			},
			toMasterDetile(id,type) { //助学师详情
				uni.navigateTo({
					url: '/pages/My/otherHelpCenter/otherHelpCenter?id=' + id +'&type='+type
				})
			},


			confirm(mapParam) {
				this.mapParam = mapParam;
				console.log(this.mapParam)
				this.isConfirm = true;
				this.requestData();
				this.isShowFilter = false;
				this.isShowMask = false
			},
			back() {
				uni.navigateBack({
					delta: 1
				})
				uni.removeStorageSync('userCountry')
			},
		},
	}
</script>

<style scoped>
	.body {
		box-sizing: border-box;
	}

	.head {
		width: 100%;
		display: flex;
		justify-content: space-between;
		height: 168upx;
		background: #ffffff;
		padding: 0 24upx;
		z-index: 200;
		position: fixed;
		top: 0;
		box-sizing: border-box;
	}

	.head_left image {
		width: 20upx;
		height: 36upx;
		margin-right: 9upx;
	}

	.head_left {
		height: 82upx;
		width: 106upx;
		display: flex;
		align-items: center;
		line-height: 82upx;
		color: #666666;
		padding-top: 70upx;
	}

	.head_right image {
		height: 38upx;
		width: 38upx;
	}

	.head_right {
		width: 106upx;
		display: flex;
		flex-direction: row-reverse;
		padding-top: 130upx;
	}
	.head_mid{
		padding-top: 90upx;
	}
	

	.tab {
		position: fixed;
		z-index: 10000;
		top: 0;
		border-bottom: 1uupx solid #dddddd;
	}

	.body {
		width: 100%;
		height: 100%;
	}

	.common-body {
		padding-top: 188upx;
		box-sizing: border-box;
	}

	.margin2 {
		padding-top: 275upx;
	}

	.countryBox {
		width: 100%;
		height: 85upx;
		background-color: white;
		border-bottom: 1upx solid #ECECEC;
		padding: 0 40upx;
		/* margin-top: 92upx; */
		position: fixed;
		top: 168upx;
		z-index: 22;
	}

	.leftBox {
		width: 550upx;
		overflow: hidden;
		overflow: scroll;
		float: left;
	}
	.leftBox2 {
		width: 640upx;
		overflow: hidden;
		overflow: scroll;
		float: left;
	}

	.coutryKuang {
		width: auto;
		font-size: 34upx;
		float: left;
		height: 85upx;
		line-height: 85upx;
		word-break: break-word;
		margin-right: 45upx;
		color: rgba(106, 109, 131, 1);
	}

	.coutryKuang.active {
		color: rgba(71, 206, 207, 1);
	}

	.moreBox {
		width: 160upx;
		height: 85upx;
		float: right;
		line-height: 85upx;
	}
	.moreBox2 {
		height: 85upx;
		float: right;
		line-height: 85upx;
	}

	.moreWen {
		font-size: 34upx;
		color: rgba(106, 109, 131, 1);
		float: left;
		width: 80upx;
	}

	.tianzhuan {
		float: right;
		height: 85upx;
		line-height: 85upx;
	}

	.tianzhuan image {
		width: 14upx;
		height: 23upx;
		padding-right: 65upx;
	}

	.commonContent {
		/* padding: 85upx 0 0 0; */
	}

	.commonContent.active {
		padding: 85upx 0 0 0;
	}

	.clear {
		clear: both;
	}

	.content {
		width: 100%;
		height: 90upx;
		background-color: white;
		display: flex;
		position: relative;
	}

	.content_list {
		width: 250upx;
		height: 90upx;
		text-align: center;
		display: flex;
		line-height: 90upx;
		position: relative;
		color: #858697;
		justify-content: center;
	}

	.content_list:last-child .shuxian {
		background-color: white;
	}

	.shuxian {
		width: 2upx;
		height: 35upx;
		background-color: #969696;
		position: absolute;
		top: 28upx;
		left: 250upx;
	}

	.content .content_list:last-child {
		border: none;
	}

	.content_list.active {
		color: #33CBCC;
	}

	.content_list.yi {
		border: none;
	}

	.content_list .font_style {
		line-height: 90upx;
		font-size: 24upx;
	}

	.content_list image {
		width: 20upx;
		height: 14upx;
		overflow: initial;
		margin-left: 13upx;
		margin-top: 40upx;
		display: flex;
	}

	.conent_body {
		height: 125upx;
		padding: 30upx 24upx;
		border-bottom: 1upx solid #F3F3F3;
		background: #fff;
		position: relative;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.left_body {
		width: 125upx;
		height: 125upx;
		float: left;
		position: relative;
		margin-right: 30upx;

	}

	.right_body {
		height: 125upx;
		display: flex;
		flex-direction: column;

	}

	.left_body image {
		width: 125upx;
		height: 125upx;
		border-radius: 50%;

	}

	.left_body .countryimg {
		width: 33upx;
		height: 33upx;
		border-radius: 50%;
		overflow: hidden;
		position: absolute;
		left: 0;
		bottom: 0;
		z-index: 10;
	}

	.img-sex {
		margin-right: 10upx;
	}

	.bottom_box {
		width: 100%;
		height: 45upx;
		background-color: #B7BEBE;
		position: absolute;
		bottom: 0;
		background: rgba(255, 255, 255, 0.5);
		border-radius: 5upx;
		font-size: 24upx;
		color: #404a4c;
		text-indent: 10upx;
		line-height: 45upx;
	}

	.last_time {
		font-size: 24upx;
		color: #8E8F9F;
		position: absolute;
		top: 40upx;
		right: 40upx;
	}

	.talkTo {
		height: 40upx;
		width: 100upx;
		background: #47CECF;
		border-radius: 40upx;
		font-size: 24upx;
		color: #FFFFFF;
		display: flex;
		justify-content: center;
		position: absolute;
		right: 40upx;
		bottom: 40upx;
	}

	.yuand {
		width: 6upx;
		height: 6upx;
		display: inline-flex;
		margin-top: 20upx;
		background-color: #404a4c;
		border-radius: 6upx;
		margin-left: 10upx;
		margin-right: 10upx;
	}

	.top_box {
		width: auto;
		height: 35upx;
		position: absolute;
		top: 15upx;
		right: 20upx;
		line-height: 35upx;
		border-radius: 5upx;
		background-color: #d4d2d2;
		text-align: center;
		font-size: 20upx;
		color: #404a4c;
		padding: 0 10upx;
	}

	.title_box {
		display: flex;
		align-items: center;
		position: relative;
		justify-content: flex-start;
	}

	.nickname-and {
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.nickname {
		max-width: 200upx;
		font-size: 30upx;
		line-height: 40upx;
		margin-right: 10upx;
	}


	.image_box {
		width: 35upx;
		height: 37upx;
	}

	.hui_yuan_box {
		position: absolute;
		right: 0;
		width: 120upx;
		height: 35upx;
	}

	.authentication {
		overflow: hidden;
		margin-top: 10upx;
		margin-bottom: 10upx;
	}

	.authentication_box {
		border: 1upx solid #33cbcc;
		float: left;
		border-radius: 5upx;
		box-sizing: border-box;
		text-align: center;
		line-height: 25upx;
		height: 25upx;
		font-size: 16upx;
		color: #33cbcc;
	}

	.authentication_box2 {
		border: 1upx solid #8E8F9F;
		float: left;
		border-radius: 5upx;
		box-sizing: border-box;
		text-align: center;
		line-height: 25upx;
		height: 25upx;
		font-size: 16upx;
		color: #8E8F9F
	}

	.shenfen {
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		max-width: 120upx;
		margin-left: 10upx;
		padding: 0 6upx;
	}

	.renzheng {
		font-size: 16upx;
		color: #33cbcc;
	}


	.common_ys {
		width: 400upx;
		font-size: 26upx;
		line-height: 48upx;
		color: #999999;
	}

	.common_ys text {
		margin: 0 10upx;
	}

	.juli {
		height: 35upx;
		font-size: 26upx;
		color: #33cbcc;
		text-align: right;
	}

	.filter-item {
		overflow: hidden;
		padding: 60upx 0;
		padding-top: 0;
	}

	.tab .xuanze-box .filter-item:first-child {
		padding-top: 60upx;
	}

	.xuanxiangka {
		width: 100%;
		height: auto;
		overflow: hidden;
		background-color: white;
		z-index: 22;
	}

	.xuanzhe {
		width: 100%;
		border-top: 1upx solid #dddddd;
		background: #F8F8F8;
	}

	.xuanze-box {
		padding: 0 40upx;
		margin: auto;
	}

	.xuanzhe.neibianju {
		padding-bottom: 100upx;
		padding-top: 60upx;
	}

	.xuanzhe_hidden {
		width: 100%;
		margin: auto;
		position: relative;
		display: flex;
	}

	.xuanzhe_hidden.common {
		width: 90%;
		margin: auto;
	}

	.anniu {
		width: 155upx;
		height: 60upx;
		border: 1upx solid #dddddd;
		display: flex;
		margin-right: 15upx;
		border-radius: 10upx;
		color: #858697;
	}

	.filter-item-main .anniu-individual:nth-child(4n) {
		margin-right: 0;
	}

	.anniu_wenzi {
		width: 155upx;
		height: 60upx;
		font-size: 26upx;
		line-height: 60upx;
		text-align: center;
	}

	.anniu.individual {
		margin-left: 0;
		border: none;
	}

	.anniu-individual {
		width: 150upx;
		height: 60upx;
		border: 1upx solid #dddddd;
		float: left;
		margin-right: 15upx;
		border-radius: 10upx;
		color: #858697;
		margin-top: 15upx;
	}

	.anniu-individual.sangwaibj {
		margin-top: 0upx;
	}

	.anniu-individual.active {
		width: 150upx;
		height: 60upx;
		border: 1upx solid white;
		border-radius: 10upx;
		background-color: #33cbcc;
		color: white;
	}


	.anniu.active {
		width: 155upx;
		height: 60upx;
		border: 1upx solid white;
		border-radius: 10upx;
		background-color: #33cbcc;
		color: white;
	}

	.subimit_box {
		width: 100%;
		height: 80upx;
		display: flex;
		border-top: 1upx solid #ddd;
	}

	.submit {
		width: 50%;
		height: 80upx;
		display: flex;
	}

	.submit_wenzi {
		width: 100%;
		height: 80upx;
		text-align: center;
		line-height: 80upx;
		color: #33cbcc;
		font-size: 30upx;
		border: 0;
		background-color: white;
	}

	.submit_wenzi.active {
		color: white;
		background-color: #33cbcc;
	}

	.xuanzhe-title {
		width: 100%;
		font-size: 28upx;
		color: #858697;
	}

	.comment {
		display: flex;
		color: #858697;
		font-size: 24upx;
	}

	.comment.yi {
		margin-left: 0upx;
	}

	.jindu {
		width: 400upx;
		display: flex;
		margin-left: 20upx;
		margin-right: 20upx;
		margin-bottom: 65upx;
	}

	.yuanqiu {
		width: 32upx;
		height: 32upx;
		border-radius: 32upx;
		background-color: #1fc9c8;
		display: flex;
	}

	.jindu-hentiao {
		width: 336upx;
		height: 5upx;
		display: flex;
		margin-top: 14upx;
		background-color: #a5e1dd;
	}

	.address-and image {
		width: 55upx;
		height: 55upx;
		margin-top: 28upx;
	}


	.address-and {
		display: flex;
		flex-direction: column;
		align-items: flex-end;
		justify-content: space-between;
		color: #46CECF;
		font-size: 28upx;
	}

	.teachLanguage {
		height: 28upx;
		line-height: 28upx;
		color: #FFFFFF;
		font-size: 20upx;
		background: #46CECF;
		border-radius: 5px;
		padding: 0 10upx;
		margin-bottom: 36upx;
	}
</style>
